<!--
 * @Date: 2023-02-08 17:07:43
 * @LastEditTime: 2023-02-14 18:15:21
 * @FilePath: /hash-guess-game/src/component/card/CardGlass.vue
 * 介绍:
-->
<script lang="ts" setup>
import useUserInfoStore from "@@/store/useUserInfoStore";

const slot = useSlots();
const props = withDefaults(
  defineProps<{
    /**模糊度 */
    blur?: string;
    /**幕后盒子颜色 */
    backstageBgColor?: string;
    /**背景颜色 */
    bg?: string;
  }>(),
  {
    blur: "5rem",
  }
);
</script>

<template>
  <div class="CardGlass">
    <div
      :style="{ backdropFilter: `blur(${props.blur})`, background: props.bg }"
      class="CardGlass_box bevel"
    >
      <div v-if="!!slot.header" class="CardGlass_header">
        <slot name="header"></slot>
      </div>
      <div class="CardGlass_content">
        <slot></slot>
      </div>
    </div>
    <div class="CardGlass_backstage">
      <slot name="backstage">
        <div
          v-if="props.backstageBgColor"
          class="CardGlass_backstage__default"
          :style="{ backgroundColor: props.backstageBgColor }"
        >
          &nbsp;
        </div>
      </slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.CardGlass {
  position: relative;
  width: 100%;
  height: 100%;
}
.CardGlass_box {
  --box-show-C: rgba(255, 255, 255, 0.15);
  background-color: var(--C-O2);
  border-radius: 12rem;
  padding: 0 var(--gap-md);
  .CardGlass_header {
    padding: var(--gap-sm) 0;
    border-bottom: solid 1px var(----box-show-C);
  }
  .CardGlass_content {
    padding: var(--gap-sm) 0;
  }
}
.CardGlass_backstage {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  z-index: -1;
  display: grid;
  justify-items: center;
  align-items: center;
  .CardGlass_backstage__default {
    height: 60%;
    width: 90%;
  }
}
</style>
